<template>
    <div>
        <div style="padding: 20px 5px;">
            <el-page-header @back="goBack" content="详情页面">
            </el-page-header>
        </div>
        <div style="border-bottom: solid black">
            题目：<span>{{title}}</span>
        </div>
        <div v-if="btnShow || isShow">
            <div style="margin-top: 20px;">
                答案：
            </div>
            <div style="padding-bottom:20px;border-bottom: solid black;min-height: 370px;">
                <div style="margin-bottom: 3px;" v-for="(item,index) in content" :key='index'>({{++index}}){{item.value}}</div>
            </div>
        </div>


        <div style="margin-top: 20px;">
            <el-button size="small"  @click="isShow = true">查看答案</el-button>
            <el-button size="small" v-if="type == 2" @click="toNext">下一题</el-button>
            <el-button size="small" @click="shuaxin">刷新</el-button>
            <div style="display: inline-block;margin-left: 5px;">
                <span style="font-size: 12px;">默认显示答案：</span>
                <el-switch
                        v-model="btnShow"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                </el-switch>
            </div>

        </div>
    </div>
</template>

<script>
    import timu from '/src/js/timu'
    import gltimu from '/src/js/gltimu'
    export default {
        name: "fx",
        data:()=>{
          return {
              timu:timu,
              gltimu:gltimu,
              title:'',
              content:[],
              isShow:false,
              type:0,
              tiType:0,
              number:1,
              btnShow:false,
              timeOut:true
          }
        },
        mounted(){
            console.log(this.$route.params)
            this.type = this.$route.params.type;
            this.tiType = this.$route.params.tiType;
            this.getTi();
        },
        methods:{
            getTi(){
                this.isShow = false;
                let timuData = [];
                if(this.tiType == 1){
                     timuData = this.timu;
                }
                if(this.tiType == 2){
                     timuData = this.gltimu;
                }
                let key = 1;
                let length = timuData.length;
                if(this.type == 1){
                     key =  parseInt(Math.random()*(length-1+1)+1,10);
                }else{
                     key =  this.number;
                }
                if(key > length && this.timeOut){
                    this.timeOut = false;
                    setTimeout(()=>{
                        this.timeOut = true;
                    },4000);
                    this.$message({
                        message: '没有题了!',
                        type: 'warning'
                    });
                }
                let t = timuData[--key];
                this.title = t.title;
                this.content = t.content;
                this.number++;

            },
            toNext(){
                this.getTi(this.number);
            },
            shuaxin(){
                this.number = 1;
                this.getTi();
            },
            goBack(){
                this.$router.back();
            }
        }
    }
</script>

<style scoped>

</style>